import React, { useEffect, useState } from 'react'
import { getProListFn, getCategoryFn, searchProFn, updateRecommendProFlagFn } from '../../api/pro'
import { Table, Image, Tag, message, Switch, Input, Button } from 'antd'


export default function Index() {

    const [proList, setproList] = useState([])
    const [filters, setfilters] = useState([])

    useEffect(() => {
        getProListFn().then(res => {
            setproList(res.data)
        })


        getCategoryFn().then(res => {
            // console.log(res.data);
            const arr = []
            res.data.forEach(item => {
                arr.push({
                    text: item,
                    value: item
                })
            })
            // console.log(arr);
            setfilters(arr)
        })
    }, [])

    const [current, setcurrent] = useState(1)
    const columns = [{
        title: '序号',
        render(t, r, i) {
            return <Tag>{(current - 1) * 10 + i + 1}</Tag>
        },
        width: 80
    }, {
        title: '商品名称',
        dataIndex: 'proname',
        width: 300
    }, {
        title: '商品图片',
        dataIndex: 'img1',
        width: 150,
        render(t) {
            return <Image src={t} width={80} />
        }
    }, {
        title: '商品分类',
        dataIndex: 'category',
        filters,
        onFilter: (value, record) => record.category.indexOf(value) === 0,
    }, {
        title: '商品价格',
        dataIndex: 'originprice',
        sorter: (a, b) => a.originprice - b.originprice,
    }, {
        title: '商品折扣',
        dataIndex: 'discount',
        sorter: (a, b) => a.discount - b.discount,
    }, {
        title: '是否推荐',
        dataIndex: 'isrecommend',
        render(t, r) {
            return <Switch onChange={(e) => {
                updateRecommendProFlagFn({
                    proid: r.proid,
                    type: 'isrecommend',
                    flag: e
                }).then(res => {
                    // console.log(res);
                    message.success(res.message)
                })
            }} defaultChecked={t} />
        }
    }, {
        title: '是否售卖',
        dataIndex: 'issale',
        render(t) {
            return <Switch defaultChecked={t} />
        }
    }, {
        title: '是否秒杀',
        dataIndex: 'isseckill',
        render(t) {
            return <Switch defaultChecked={t} />
        }
    }
    ]

    // ------------------ 搜索
    const [searchText, setsearchText] = useState('')
    function searchClick() {
        console.log(searchText);
        searchProFn({
            search: searchText,
            category: ''
        }).then(res => {
            // console.log(res.data);
            setproList(res.data)
        })
    }

    return (
        <div>
            <h3>
                商品列表
                <Input value={searchText} onChange={e => { setsearchText(e.target.value) }} style={{ width: 300, marginLeft: 30 }} type='text' placeholder='请输入商品名称' />
                <Button onClick={searchClick}> 搜索 </Button>
            </h3>

            <Table
                rowKey={'proid'}
                dataSource={proList}
                pagination={{
                    current,
                    onChange(page) {
                        setcurrent(page)
                    }
                }}
                columns={columns}
                scroll={{
                    y: 450
                }}
                locale={{
                    triggerDesc: '点击降序',
                    triggerAsc: '点击升序',
                    cancelSort: '取消排序',
                    filterConfirm: '确定',
                    filterReset: '重置',
                }}
            />
        </div>
    )
}
